import React,{Suspense} from "react";
import { Navigate } from "react-router-dom";
import Loading from "@/components/Loading";

// import Login from "@/pages/Login";
// import Home from "@/pages/Home";
// import NotFound from "@/pages/404";
// import News from "@/pages/Home/components/News";
// import Music from "@/pages/Home/components/Music";
// import Game from "@/pages/Home/components/Game";
// import GameItem from "@/pages/Home/components/Game/Item";
// import MusicItem from "@/pages/Home/components/Music/Item";
// import NewsItem from "@/pages/Home/components/News/Item";


/* 
  React提供一个方法lazy,返回一个组件
  当这个组件需要被加载的时候，就会执行lazy方法中的回调函数
  内部回调函数使用 import方法动态引入模块，如果import返回成功的promise，则代表引入成功，并拿到promise的值，就是当前引入的组件
*/
const Login = React.lazy(()=> import('@/pages/Login'))
const Home = React.lazy(() => import("@/pages/Home"))
const NotFound = React.lazy(() => import("@/pages/404"))
const News = React.lazy(() => import("@/pages/Home/components/News"))
const Music = React.lazy(() => import("@/pages/Home/components/Music"))
const Game = React.lazy(() => import("@/pages/Home/components/Game"))
const GameItem = React.lazy(() => import("@/pages/Home/components/Game/Item"))
const MusicItem = React.lazy(() => import("@/pages/Home/components/Music/Item"))
const NewsItem = React.lazy(() => import("@/pages/Home/components/News/Item"))

// console.log(Home);

function load(Comp) {
  return <Suspense fallback={<Loading />}>
    <Comp />
  </Suspense>
}

const routes = [
  {
    path: "/",
    element: <Navigate to="/home" />,
  },
  {
    path: "/login",
    element: load(Login),
  },
  {
    path: "/home",
    element: load(Home),
    children: [
      {
        path: "",
        element: <Navigate to="news" />,
      },
      {
        path: "news",
        element: load(News),
        children: [
          {
            path: "item",
            element: load(NewsItem)
          }
        ]
      },
      {
        path: "game",
        element: load(Game),
        children:[
          {
            path:'item',
            element:load(GameItem)
          }
        ]
      },
      {
        path: "music",
        element: load(Music),
        children:[
          {
            path:'item/:name/:id',
            element:load(MusicItem)
          }
        ]
      },
    ],
  },
  {
    path: "/*",
    element: load(NotFound),
  },
];

export default routes;
